//入口文件
 import Vue from '../node_modules/vue/dist/vue.js'

 //导入vuex包
 import Vuex from 'vuex'
 Vue.use(Vuex)
 //每次刚进入网站，肯定会调用main。js，在刚调用的时候，先从本地存储中把购物车的数据读取出来，放到store中
 var car = JSON.parse(localStorage.getItem('car') || '[]')
  //创建一个vuex数据仓储对象
 var store =new Vuex.Store({
     state:{
         //state相当于组件里的data
        car:car //将购物车中的商品数据，用一个数组存储起来，在car数组中存储一些商品的对象，砸门可以暂时将商品对象，设计成{id：商品的id，count：要购买的数量，price：商品的价格，selected：true}

     },
     mutations:{
         
        //如果要操作 store 中的 state 值 只能通过调用mutations来操作对应的数据，不推荐直接操作 state中的数据，因为外衣导致了数据的混乱，不能快速定位到错误的原因，因为每个组件都可能有操作数据的方法
        addtocar(state,goodsinfo){
            //点击加入购物车，把商品信息保存到 store 中 car 上
            //1. 如果购物车中，之前已经有这个对应的商品了，那么我们就更新商品的数量
            //2.r如果没有，则直接把商品数据，push到car上

            //假设在购物车没有找到的对应的商品
            var flag =false

            state.car.some(item =>{
                if(item.id === goodsinfo.id){
                    item.count += parseInt(goodsinfo.count)
                    flag = true
                    return true
                }
            })
            //如果循环完后，得到的flag还是false ，就没有对应商品，直接push商品
            if(!flag){
                state.car.push(goodsinfo)
            }
            //当刷新页面或者关掉浏览器时候，使数据依然还存在。因为得到的car的数据只是保存在内存里，刷新后就没有了。需把数据存储到本地的 localStorage中
            localStorage.setItem('car',JSON.stringify(state.car))


        },
        updategoodsinfo(state,goodsinfo){
            //修改购物车中商品的数量值
            state.car.some(item =>{
                if(item.id == goodsinfo.id){
                    item.count = parseInt(goodsinfo.count)
                    return true
                }
            })
           //当修改完商品的数据后，把最新购物车的数据保存到本地储存
            localStorage.setItem('car',JSON.stringify(state.car))

        },
        removelocalstoragedata(state,id){
            //根据id，从store中 过购物车中删除对应的那条数据
            state.car.some((item,index) =>{
                if(item.goodsId == id){
                    state.car.splice(index,1)
                    return true 
                }
            })
            //将删除完毕后最新的购物车数据同步到本地存储
            localStorage.setItem('car',JSON.stringify(state.car))

        },
        updategoodsselected(state, info){
            state.car.some(item=>{
                if(item.id == info.goodsId){
                    item.selected =info.selected
                }
            })
            //把最新的所有购物车商品状态保存到最新的 store 中
            localStorage.setItem('car',JSON.stringify(state.car))


        }
      

        
        // 如果组件想要调用 mutations 的方法，只能使用 this.$store.commit('increment')
        //这种方法 和 this.$emit('父组件中的方法名') 很相像
     },
     getters:{
         //getters相当于计算属性和过滤器
         getallcount(state){
             var c =0;
             state.car.forEach(item =>{
                 c += item.count
             })
             return c

         },
         getgoodscount(state){
             var o ={}
             state.car.forEach(item =>{
                 o[item.id] = item.count
             })
             return o
         },
         getgoodsselected(state){
            var p ={}
            state.car.forEach(item =>{
                p[item.id] = item.selected
            })
            return p


         },
         getgoodscountandallprice(state){
             var s ={
                  //勾选的数量与总价
                 count:0, 
                 allprice:0

             }
             state.car.forEach(item =>{
                 if(item.selected === true){
                     s.count += item.count
                    s.allprice += item.price * item.count
                 }
             })
             return s


         }


     }
     //总结：1.state里的数据不能修改，如果要修改必须要用到 mutations 
        //  2.如果要从组件间 state 上获取数据，需要 this.$store.state.***
        //  3.如果组件要修改数据，必须使用mutations 提供的 this.$store.commit('方法的名称'，唯一的参数)
        //  4.如果store 中的state的数据，在对外提供的时候 需要进行包装，推荐使用getters ，this.$store.getters.***
        
 })
 //1.导入路由的包,安装路由
 import VueRouter from 'vue-router'
 Vue.use(VueRouter)
 //导入resource，安装resource
 import VueResource from 'vue-resource'
 Vue.use(VueResource)

 import axios from 'axios'
 Vue.prototype.$ajax = axios
 //设置请求的根路径
//  Vue.http.options.root= 'http://vue.studyit.io'
//全局设置 post 请求时 表单数据格式组织形式
Vue.http.options.emulateJSON = true
//导入格式化时间的插件
import moment from 'moment'
//定义全局的过滤器
Vue.filter('dateFormat',function(dataStr,pattern = "YYYY-MM-DD HH:mm:ss"){
    return moment(dataStr).format(pattern)

})


//导入 MUI 样式
import './lib/mui/css/mui.css'
import './lib/mui/css/icons-extra.css'
//全局引入关于 vue-preview 的 css文件
import './lib/CSS/golbal.css'
//按需导入需要的min-ui组件
// import { Header,Swipe, SwipeItem,Button,Lazyload } from 'mint-ui'
// Vue.component(Header.name,Header)
// Vue.component(Swipe.name, Swipe)
// Vue.component(SwipeItem.name, SwipeItem)
// Vue.component(Button.name, Button)
// Vue.use(Lazyload)
//全局加载 mint-ui 
import Mintui from 'mint-ui'
Vue.use(Mintui)
import 'mint-ui/lib/style.css'
//安装图片预览插件
import VuePreview from 'vue-preview'
Vue.use(VuePreview)

//使用photoswipe来给移动端放大缩小图片
// import photoswipe from 'photoswipe'
// Vue.use(photoswipe)

//2.导入 router.js 路由模块
import router from './router.js'
//导入APP 根组件
import app from './App.vue'

var vm = new Vue({
    el:'#app',
    data:{
      


    },
    methods:{

    },
    render:function(e){
        return e(app)

    },
    router ,//挂在router对象到vm实例中
    store //挂载 store 状态管理对象
})
